<template>
  <div class="AddService">
    <div class="ele-title"><h4 v-if="isEditService">编辑服务</h4><h4 v-else-if="isCopyService">复制服务</h4><h4 v-else>新增服务</h4></div>
    <div class="ele-con-res"><span>基本信息</span></div>
    <div class="ele-content">
      <el-form :model="form" :rules="rules" label-position="right" label-width="110px">
        <el-form-item label="服务名称:" prop="serviceName">
          <el-col :span="24">
            <el-input v-model="form.serviceName" placeholder="请输入服务名称" maxlength="20" show-word-limit class="cus-input" />
          </el-col>
        </el-form-item>
        <el-form-item label="服务简介:" prop="serviceIntroduce">
          <el-col :span="24">
            <el-input v-model="form.serviceIntroduce" placeholder="请输入服务简介" maxlength="20" show-word-limit class="cus-input" />
          </el-col>
        </el-form-item>
        <el-form-item label="服务图片:" prop="serviceImg">
          <el-col :span="24">
            <!--            <el-upload
              :action="uploadPath"
              list-type="picture-card"
              class="ele-col-upload"
              accept=".jpg, .png"
              :data="{path:path,fileType: 6}"
              :before-upload="beforeAvatarUpload"
              :on-success="uploadServiceUrl"
              :limit="limitCount"
              :on-change="isOverLimit"
              :on-remove="isOverLimit"
              :class="{hide:hideUpload}"
            >
              <div v-if="form.serviceImg&&form.serviceImg.length>0">
                <img
                  v-for="(item,index) in form.serviceImg"
                  v-show="hideImgUpload"
                  :key="index"
                  style="width: 200px"
                  class="el-upload-list__item-thumbnail"
                  :src="baseUrl+item"
                  alt=""
                >
              </div>

              <i v-else-if="form.serviceImg&&form.serviceImg.length===0" class="el-icon-plus avatar-uploader-icon" />
            </el-upload>-->
            <el-upload
              :action="uploadPath"
              list-type="picture-card"
              accept=".jpg,.png"
              class="ele-col-upload"
              :data="{path:path,fileType: 6}"
              :before-upload="beforeAvatarUpload"
              :on-success="uploadServiceUrl"
              :limit="limitCount"
              :on-change="isOverLimit"
              :on-remove="onRemove"
              :class="{hide:hideUpload}"
              :file-list="form.serviceImg"
            >
              <i class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="可上传jpg,png图片，尺寸：300X300像素
            最多可上传五张，单张图片不能大于3M
            第一张图为首图，显示在列表首页和列表页面。您可以拖动图片调整图片顺序"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="主图视频:" prop="serviceVideo">
          <el-col :span="24">
            <el-upload
              class="ele-col-upload"
              :action="uploadPath"
              accept=".mp4"
              :data="{path:path,fileType: 4}"
              :on-progress="uploadVideoProcess"
              :on-success="handleVideoSuccess"
              :before-upload="beforeUploadVideo"
              :show-file-list="false"
              :list-type="form.serviceVideo !='' && !videoFlag ? 'text' : 'picture-card'"
            >
              <video
                v-if="form.serviceVideo !='' && !videoFlag"
                :src="form.serviceVideo"
                style="width: 148px; height: 148px;"
                class="avatar video-avatar"
                controls="controls"
              >
                您的浏览器不支持视频播放
              </video>
              <i
                v-else-if="form.serviceVideo ==='' && !videoFlag"
                class="el-icon-plus avatar-uploader-icon"
              />
              <el-progress
                v-if="videoFlag === true"
                type="circle"
                :percentage="videoUploadPercent"
                style="margin-top:7px;"
              />
            </el-upload>
            <el-button v-if="form.serviceVideo !='' && !videoFlag" type="danger" icon="el-icon-delete" @click="form.serviceVideo =''">删除主图视频</el-button>
          </el-col>
        </el-form-item>
        <el-form-item label="服务分类:" prop="serviceClass">
          <el-col :span="6">
            <el-cascader
              v-model="form.serviceClass"
              class="ele-cascader"
              :options="classOptions"
              :props="{ checkStrictly: true }"
              clearable
              @change="changeClass"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="标签:" prop="serviceLabel">
          <el-col :span="6">
            <el-select
              v-model="form.serviceLabel"
              multiple
              placeholder="添加服务标签"
              class="cus-input"
              clearable
            >
              <el-option
                v-for="(item, i) in labelOptions"
                :key="i"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
            <p class="title-txt">可添加多个标签</p>
          </el-col>
        </el-form-item>
        <el-form-item label="加入推广:" prop="radio">
          <el-radio-group v-model="form.radio">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--        <el-form-item>
          <div class="ele-proportion">
            <el-radio-group v-if="form.radio1==='1'" v-model="form.radio2">
              <el-radio
                label="0"
              >推广分成比例:</el-radio><el-input-number
                v-model="form.percent"
                :disabled="form.radio2==='0'?false:true"
                :controls="false"
                suffix-icon="iconfont icon-settingbaifenbi"
                :precision="0"
                :min="0"
                :max="100"
                placeholder="请输入百分比"
              />
              <el-radio
                label="1"
                style="margin-left: 20px"
              >推广固定分成:</el-radio><el-input-number
                v-model="form.fix"
                :disabled="form.radio2==='1'?false:true"
                :controls="false"
                :precision="2"
                placeholder="请输入金额"
              />
            </el-radio-group>
          </div>
        </el-form-item>-->
        <el-form-item>
          <div class="ele-proportion">
            <el-radio-group v-if="form.radio==='1'" v-model="form.radio1">
              <el-radio
                label="0"
              >推广分成比例:</el-radio><el-input-number
                v-model="form.percent"
                :disabled="form.radio1==='0'?false:true"
                :controls="false"
                :precision="0"
                :min="0"
                :max="100"
                placeholder="百分比"
              />
              <el-radio
                label="1"
                style="margin-left: 20px"
              >推广固定分成:</el-radio><el-input-number
                v-model="form.fix"
                :disabled="form.radio1==='1'?false:true"
                :controls="false"
                :precision="2"
                :min="0"
                :max="100000"
                placeholder="单位元"
              />
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="医生分成比例" prop="doctorDivided">
          <el-input-number
            v-model="form.doctorDivided"
            :controls="false"
            :precision="0"
            :min="0"
            :max="100"
          />%
        </el-form-item>
        <el-form-item label="成本价:" prop="cost">
          <el-col :span="24">
            <el-input-number
              v-model="form.cost"
              placeholder="请输入成本价格，单位元"
              :controls="false"
              :precision="2"
              :disabled="disabled"
              :min="0"
              :max="100000"
            />元
            <!--            <p class="title-txt">根据改成本价格计算利润分成</p>-->
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="根据该成本价格计算利润分成"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="原价价格:" prop="originalPrice">
          <el-col :span="24">
            <el-input-number
              v-model="form.originalPrice"
              :controls="false"
              :disabled="disabled"
              :precision="2"
              placeholder="请输入原价价格，单位元"
              :min="0"
              :max="100000"
            />
            元
            <!--            <p class="title-txt">
              商品旁边显示的元价格。售卖测显示划线价格，租赁则显示原价价格。
            </p>-->
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="服务显示的划线价格"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="分享描述:">
          <el-col :span="24">
            <el-input v-model="form.shareDescript" placeholder="输入分享描述" class="cus-input" maxlength="40" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="小程序分享后的描述文字，如果不填写，将显示默认描述。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="服务科室:" prop="department">
          <el-col :span="24">
            <el-cascader
              v-model="form.department"
              placeholder="服务科室"
              class="cus-input"
              :options="departmentOptions"
              clearable
            />
          </el-col>
        </el-form-item>
        <el-form-item label="可预约时间:" prop="appointmentDay">
          <el-col :span="7">
            <el-col :span="22">
              <el-input-number v-model="form.appointmentDay" :controls="false" :precision="0" :min="1" :max="10" />天
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="用户可预约的最长天数,最少一天，最长10天。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <div v-for="(item, index) in timeList" :key="index">
          <TimeInterval ref="TimeInterval" :index="index" :time-form="item" @delete="deleteTimeInterval" />
        </div>
        <el-button type="text" @click="addTimeInterval">添加时间段</el-button>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="可预约的最早时间段为上午8:00,最晚时间段为晚上22：00。除了第一个时间段外，下一个时间段的开始时间必须大于上一个时间段的最晚时间。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="服务规格:" required>
          <el-col :span="24">
            <ServiceSku
              ref="serviceSku"
              :can-edit-sku="!isEditService"
              :sku-form-data="{
                regualrList: regualrList ? regualrList : []
              }"
              :regualr-combo="regualrCombo? regualrCombo : []"
              @change="changeServiceSku"
            />
          </el-col>
        </el-form-item>
        <!--        <el-form-item v-if="isServiceSpec" label="服务规格:" prop="serviceSpec">
          <el-col :span="20">
            <div class="Specifications">
              <el-button
                v-if="!cationstaga"
                plain
                type="primary"
                @click="loadServiceSpec"
              >添加规格</el-button>
              <div v-if="cationstaga" class="cations-tag">
                <el-row v-for="(item, index) in list" :key="index">
                  <SpecItem ref="SpecItem" :index="index" :type="2" :table-head="item" @createTable="createTable" @delete="deleteSpec" />
                </el-row>
                <el-button type="text" @click="addSpec">添加规格</el-button>
              </div>
            </div>
            <table v-if="cationstaga&&list && list.length > 0" class="ele-table">
              <thead>
                <tr v-if="theadList&&theadList.length>0">
                  <td v-for="(item,index) in theadList" :key="index">{{ item }}</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in tbodyList" :key="index">
                  <td v-for="(i,j) in item" v-show="i.val!==''" :key="j" :rowspan="i.rowspan">
                    <span v-if="i.val!=='cost'&&i.val!=='original'&&i.val!=='img'&&i.val!=='img1'">{{ i.val }}</span>
                    <ServiceCostValue v-if="i.val==='cost'" ref="ServiceCostValue" :index="j" />
                    <ServiceOriginalValue v-if="i.val==='original'" ref="ServiceOriginalValue" :index="j" />
                    <UploadImg v-if="i.val==='img'" ref="UploadImg" :index="j" @beforeImgUpload="beforeAvatarUpload" />
                  </td>
                </tr>
              </tbody>
            </table>
          </el-col>
        </el-form-item>
        <el-form-item v-if="!isServiceSpec" label="服务规格:" prop="serviceSpec">
          <el-col :span="20">
            <div class="Specifications">
              <div class="cations-tag">
                <el-row v-for="(item, index) in list" :key="index">
                  <SpecItem ref="SpecItem" :index="index" :type="2" :table-head="item" @createTable="createTable" @delete="deleteSpec" />
                </el-row>
                <el-button type="text" @click="addSpec">添加规格</el-button>
              </div>
            </div>
            <table v-if="list && list.length > 0" class="ele-table">
              <thead>
                <tr v-if="theadList&&theadList.length>0">
                  <td v-for="(item,index) in theadList" :key="index">{{ item }}</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in tbodyList" :key="index">
                  <td v-for="(i,j) in item" v-show="i.val!==''" :key="j" :rowspan="i.rowspan">
                    <span v-if="i.val!=='cost'&&i.val!=='original'&&i.val!=='img'&&i.val!=='img1'">{{ i.val }}</span>
                    <ServiceCostValue v-if="i.val==='cost'" ref="ServiceCostValue" :table-price="costPriceList[index]" :index="j" />
                    <ServiceOriginalValue v-if="i.val==='original'" ref="ServiceOriginalValue" :table-price="originalPriceList[index]" :index="j" />
                    <UploadImg v-if="i.val==='img'" ref="UploadImg" :table-img="imgList[index]" :index="j" @beforeImgUpload="beforeAvatarUpload" />
                  </td>
                </tr>
              </tbody>
            </table>
          </el-col>
        </el-form-item>-->
        <el-form-item label="预约须知:" prop="annouce">
          <el-row v-if="form.annouce != null" :gutter="24">
            <WangEditor v-model="form.annouce" :height="400" style="width: calc(100% - 12px); margin-left: 12px;" />
          </el-row>
        </el-form-item>
        <el-form-item label="服务流程:" prop="serviceProcess">
          <el-row v-if="form.serviceProcess != null" :gutter="24">
            <WangEditor v-model="form.serviceProcess" :height="400" style="width: calc(100% - 12px); margin-left: 12px;" />
          </el-row>
        </el-form-item>
      </el-form>
      <el-footer>
        <el-button type="primary" @click="submitService">提交</el-button>
        <el-button type="primary" @click="returnPage">返回上一页</el-button>
      </el-footer>
    </div>
  </div>
</template>

<script>
import { uploadPath } from '@/api/upload'
import ServiceSku from '@/components/ServiceSku'
import TimeInterval from '@/components/TimeInterval'
import { addOnlineService, departmentList } from '@/api/service'
import { classList, productLabelList } from '@/api/customAPI/shop/CommodityClassification'
import { Loading } from 'element-ui'
import WangEditor from '@/components/WangEditor'
export default {
  name: 'AddService',
  components: { TimeInterval, ServiceSku, WangEditor },
  data() {
    var valiIcon = (rule, value, callback) => {
      if (!this.serviceImg) {
        callback(new Error('请上传服务图片'))
      } else {
        callback()
      }
    }
    /* var valiIcon_two = (rule, value, callback) => {
      if (!this.serviceVideo) {
        callback(new Error('请上传服务视频'))
      } else {
        callback()
      }
    }*/
    return {
      copy: '',
      edit: '',
      id: '',
      limitCount: 5,
      hideUpload: false,
      hideImgUpload: false,
      props: { multiple: true },
      uploadPath,
      path: '/image',

      isEditService: false,
      isCopyService: false,
      serviceId: null,

      imgList: [],
      timeList: [],
      tablePost: [],
      tableModelList: [],
      tableList: [],
      theadList: [],
      tbodyList: [],
      list: [0, 1],
      originalPriceList: [],
      costPriceList: [],
      regualrList: [],
      regualrCombo: [],
      formTableList: [],
      videoFlag: false,

      // 是否显示进度条
      videoUploadPercent: '',
      // 进度条的进度，
      isShowUploadVideo: false,
      form: {
        serviceName: '',
        serviceIntroduce: '',
        serviceImg: [],
        serviceVideo: '',
        appointmentDay: '',
        serviceLabel: [],
        serviceClass: [],
        doctorDivided: '',
        cost: '',
        originalPrice: '',
        shareDescript: '',
        department: '',
        appointTime: '',
        radio: '',
        radio1: '',
        percent: '',
        fix: '',
        regualr: null,
        isEditService: false,
        isCopyService: false,
        annouce: null,
        serviceProcess: null
      },

      editorData: null,
      dialogImageUrl: '',
      disabled: false,
      cationstaga: false,
      cationstagb: false,
      departmentOptions: [],
      classOptions: [],
      labelOptions: [],
      isServiceSpec: true,
      rules: {
        serviceName: [
          { required: true, message: '服务名称不能为空', trigger: 'blur' }
        ],
        /* serviceIntroduce: [
          { required: true, message: '服务简介不能为空', trigger: 'blur' }
        ],*/
        serviceImg: [
          { required: true, validator: valiIcon }
        ],
        /* serviceVideo: [
          { required: true, validator: valiIcon_two }
        ],*/
        serviceClass: [
          { required: true, message: '服务分类不能为空', trigger: 'change' }
        ],
        serviceLabel: [
          { required: true, message: '服务标签不能为空', trigger: 'change' }
        ],
        radio: [
          { required: true, message: '请选择推广类型', trigger: ['blur', 'change'] }
        ],
        doctorDivided: [
          { required: true, message: '医生分成比例不能为空', trigger: 'blur' }
        ],
        cost: [
          { required: true, message: '成本价不能为空', trigger: 'blur' }
        ],
        originalPrice: [
          { required: true, message: '原价不能为空', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '服务科室不能为空', trigger: 'change' }
        ],
        appointmentDay: [
          { required: true, message: '可预约时间不能为空', trigger: 'blur' }
        ],
        serviceSpec: [
          { required: true, message: '服务规格不能为空', trigger: 'blur' }
        ],
        annouce: [
          { required: true, message: '服务须知不能为空', trigger: 'change' },
          { max: 5000, message: '服务须知内容长度超过5000个字符', trigger: 'blur' }
        ],
        serviceProcess: [
          { required: true, message: '服务流程不能为空', trigger: 'change' },
          { max: 5000, message: '服务流程内容长度超过5000个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  mounted() {
    const params = this.$dd(this.$route.query.p)
    console.log(params)
    if (params && params.edit) {
      this.isEditService = true
      this.id = params.serviceInfo.id
      this.form.serviceName = params.serviceInfo.name
      this.form.serviceIntroduce = params.serviceInfo.content
      this.hideImgUpload = true
      this.form.serviceImg = JSON.parse(params.serviceInfo.serviceImage).map((item, index) => {
        return {
          name: 'image' + index,
          url: this.$parseImgUrl(item),
          imgUrl: item
        }
      })
      this.hideUpload = this.form.serviceImg.length >= this.limitCount
      this.form.serviceVideo = params.serviceInfo.serviceVideo
      this.form.serviceClass = [params.serviceInfo.pid, params.serviceInfo.classifyId]
      /* JSON.parse(this.$route.params.tagId).forEach(item =>{
        this.form.serviceLabel.push(item)
      })*/
      console.log(this.classOptions)

      /* this.form.serviceLabel = params.serviceInfo.tagId.split(',')*/
      params.serviceInfo.tagId.split(',').forEach(item => {
        this.form.serviceLabel.push(parseInt(item))
      })
      console.log('编辑', this.form.serviceLabel)
      if (params.serviceInfo.isExtension === 0) {
        this.form.radio = '0'
      } else if (params.serviceInfo.isExtension === 1) {
        this.form.radio = '1'
        if (params.serviceInfo.extensionType === 1) {
          this.form.radio1 = '1'
          this.form.fix = params.serviceInfo.extensionMoney
        } else if (params.serviceInfo.extensionType === 0) {
          this.form.radio1 = '0'
          this.form.percent = params.serviceInfo.extensionMoney
        }
      }
      this.form.doctorDivided = params.serviceInfo.doctorDivided
      this.form.cost = params.serviceInfo.costPrice
      this.form.originalPrice = params.serviceInfo.originalPrice
      this.form.shareDescript = params.serviceInfo.shareContent
      this.form.department = [JSON.parse(params.serviceInfo.serviceDepartment)]
      this.form.appointmentDay = params.serviceInfo.appointmentDay
      this.timeList = JSON.parse(params.serviceInfo.serviceTime)
      this.form.annouce = params.serviceInfo.appointmentNotice
      this.form.serviceProcess = params.serviceInfo.servicePath
      this.isServiceSpec = false
      this.regualrList = params.serviceInfo.regualrList
      this.regualrCombo = params.serviceInfo.regualrCombo
      this.$nextTick(() => {
        for (let i = 0; i < this.timeList.length; i++) {
          console.log(this.$refs.TimeInterval[i])
          this.$refs.TimeInterval[i].$data.startTime = this.timeList[i].startTime
          this.$refs.TimeInterval[i].$data.endTime = this.timeList[i].endTime
          this.$refs.TimeInterval[i].$data.timeForm.startTime = this.timeList[i].startTime
          this.$refs.TimeInterval[i].$data.timeForm.endTime = this.timeList[i].endTime
        }
      })
      /* this.initLoadServiceSpec(this.$route.params.productList, this.$route.params.descriptionList.replace('[', '').replace(']', '').split(','))*/
    } else if (params && params.copy) {
      this.isCopyService = true
      this.form.serviceName = params.serviceInfo.name
      this.form.serviceIntroduce = params.serviceInfo.content
      this.hideImgUpload = true
      this.form.serviceImg = JSON.parse(params.serviceInfo.serviceImage).map((item, index) => {
        return {
          name: 'image' + index,
          url: this.$parseImgUrl(item),
          imgUrl: item
        }
      })
      this.hideUpload = this.form.serviceImg.length >= this.limitCount
      this.form.serviceVideo = params.serviceInfo.serviceVideo
      this.form.serviceClass = [params.serviceInfo.pid, params.serviceInfo.classifyId]
      /* JSON.parse(this.$route.params.tagId).forEach(item =>{
        this.form.serviceLabel.push(item)
      })*/
      console.log(this.classOptions)

      params.serviceInfo.tagId.split(',').forEach(item => {
        this.form.serviceLabel.push(parseInt(item))
      })
      console.log('编辑', this.form.serviceLabel)
      if (params.serviceInfo.isExtension === 0) {
        this.form.radio = '0'
      } else if (params.serviceInfo.isExtension === 1) {
        this.form.radio = '1'
        if (params.serviceInfo.extensionType === 1) {
          this.form.radio1 = '1'
          this.form.fix = params.serviceInfo.extensionMoney
        } else if (params.serviceInfo.extensionType === 0) {
          this.form.radio1 = '0'
          this.form.percent = params.serviceInfo.extensionMoney
        }
      }
      this.form.doctorDivided = params.serviceInfo.doctorDivided
      this.form.cost = params.serviceInfo.costPrice
      this.form.originalPrice = params.serviceInfo.originalPrice
      this.form.shareDescript = params.serviceInfo.shareContent
      this.form.department = [JSON.parse(params.serviceInfo.serviceDepartment)]
      this.form.appointmentDay = params.serviceInfo.appointmentDay
      this.timeList = JSON.parse(params.serviceInfo.serviceTime)
      this.form.annouce = params.serviceInfo.appointmentNotice
      this.form.serviceProcess = params.serviceInfo.servicePath
      this.isServiceSpec = false
      this.regualrList = params.serviceInfo.regualrList
      this.regualrCombo = params.serviceInfo.regualrCombo
      this.$nextTick(() => {
        for (let i = 0; i < this.timeList.length; i++) {
          console.log(this.$refs.TimeInterval[i])
          this.$refs.TimeInterval[i].$data.startTime = this.timeList[i].startTime
          this.$refs.TimeInterval[i].$data.endTime = this.timeList[i].endTime
          this.$refs.TimeInterval[i].$data.timeForm.startTime = this.timeList[i].startTime
          this.$refs.TimeInterval[i].$data.timeForm.endTime = this.timeList[i].endTime
        }
      })
    } else {
      this.isEditService = false
      this.isCopyService = false
      this.id = null
      this.form.annouce = ''
      this.form.serviceProcess = ''
    }
  },
  methods: {
    isOverLimit(file, fileList) {
      console.log(file)
      this.hideUpload = fileList.length >= this.limitCount
      console.log(this.hideUpload)
    },
    init() {
      const params = this.$dd(this.$route.query.p)
      if (params && params.edit) {
        this.isEditService = true
        this.serviceId = params.serviceInfo.id
      } else if (params && params.copy) {
        this.isCopyService = true
        this.serviceId = params.serviceInfo.id
      }
      classList().then(response => {
        console.log(response.data.data)
        this.classOptions = response.data.data
        console.log(this.classOptions)
      })
      const labelData = {
        shopId: 1,
        page: 1,
        limit: 0
      }
      productLabelList(labelData).then(response => {
        console.log(response.data.data)
        const labelList = response.data.data.data
        labelList.forEach(item => {
          const label = {
            value: item.id,
            label: item.name
          }
          this.labelOptions.push(label)
        })
      })
      const departmentData = {
        shopId: localStorage.getItem('shopId'),
        page: 1,
        limit: 0
      }
      departmentList(departmentData).then(response => {
        console.log(response.data.data)
        const departmentList = response.data.data.data
        departmentList.forEach(item => {
          const label = {
            value: item.id,
            label: item.name
          }
          this.departmentOptions.push(label)
        })
      })
    },
    /* /!** 编辑复制加载规格*!/
    initLoadServiceSpec(a, b) {
      console.log(b)
      const allList = []
      const allValueList = []
      a.forEach(item => {
        allList.push(JSON.parse(item.specifications))
        allValueList.push(JSON.parse(item.specifications).regualrs)
      })
      const specItemList = []

      for (let j = 0; j < b.length; j++) { // 列号
        for (let k = 0; k < allList.length; k++) { // 行号
          for (let m = k + 1; m < allList.length; m++) {
            if (allList[k][j].val === allList[m][j].val && values.indexOf(allList[k][j].val) === -1) {
              values.push(allList[k][j].val)
            } else if (allList[k][j].val !== allList[m][j].val && values.indexOf(allList[k][j].val) !== -1 && values.indexOf(allList[m][j].val) === -1) {
              values.push(allList[m][j].val)
            }
          }
        }
        specItem.name = allList[0][j].name
        specItem.description = b[j]
        specItem.values = values
        specItemList.push(specItem)
      }
      for (let m = 0; m < allList.length; m++) {
        for (let n = 0; n < allList[m].length; n++) {
          if (allList[m][n].name === '图片') {
            console.log(allList[m][n])
            this.imgList.push(allList[m][n].val)
          } else if (allList[m][n].name === '成本价') {
            this.costPriceList.push(JSON.parse(allList[m][n].val))
          } else if (allList[m][n].name === '原本价格') {
            this.originalPriceList.push(JSON.parse(allList[m][n].val))
          }
        }
      }
      console.log(specItemList)
      this.list = specItemList
      this.$nextTick(() => {
        /!* this.$refs.SpecItem[0].$data.tableHead.name = '咨询类型'
        this.$refs.SpecItem[0].$data.tableHead.description = '认证医生值班服务'
        this.$refs.SpecItem[0].$data.tableHead.values[0].val = '图文咨询服务'
        this.$refs.SpecItem[0].$data.tableHead.values[1].val = '视频咨询服务'
        this.$refs.SpecItem[1].$data.tableHead.name = '次数'
        this.$refs.SpecItem[1].$data.tableHead.values[0].val = '1次'
        this.$refs.SpecItem[1].$data.tableHead.values[1].val = '5次'*!/
        for (let i = 0; i < specItemList.length; i++) {
          this.$refs.SpecItem[i].$data.tableHead.name = specItemList[i].name
          this.$refs.SpecItem[i].$data.tableHead.description = specItemList[i].description
          for (let j = 0; j < specItemList[i].values.length; j++) {
            this.$refs.SpecItem[i].$data.tableHead.values[j].val = specItemList[i].values[j]
          }
        }
        console.log(this.$refs.SpecItem)
        this.createTable()
        console.log(this.imgList)
      })
    },*/
    /* /!** 新增规格*!/
    loadServiceSpec() {
      this.disabled = !(this.cationstagb = !(this.cationstaga = true))

      this.$nextTick(() => {
        this.$refs.SpecItem[0].$data.tableHead.name = '咨询类型'
        this.$refs.SpecItem[0].$data.tableHead.description = '认证医生值班服务'
        this.$refs.SpecItem[0].$data.tableHead.values[0].val = '图文咨询服务'
        this.createTable()
      })
    },
    // 创建表格
    createTable() {
      this.tableList = []
      if (this.list && this.list.length !== 0) {
        this.$refs.SpecItem.forEach(item => {
          this.tableList.push(item.getData())
          console.log(item)
        })
      }
      console.log(this.tableList)
      const arrList = []
      const headList = []

      this.tableList.push(this.servicePic, this.serviceCost, this.originalPrice)
      this.tableList.forEach(item => {
        if (item.name) {
          headList.push(item.name)
          if (item.values && item.values.length !== 0) {
            arrList.push(item.values)
          }
        }
      })
      this.theadList = headList

      const modelList = this.cartesianProductOf(...arrList)
      const list = []
      const count = 1

      for (let i = 0; i < modelList.length; i++) {
        const modelArrList = []
        for (let k = 0; k < modelList[i].length; k++) {
          modelArrList.push({
            val: modelList[i][k].val,
            index: k,
            rowspan: count
          })
        }
        list.push(modelArrList)
      }
      console.log(list)
      this.tableRowspan(list, modelList)
      this.tableModelList = modelList
      this.tbodyList = list
    },*/
    // table合并行方法 a为table数组 b为对比数组
    /* tableRowspan(a, b) {
      for (let i = 0; i < a.length - 1; i++) {
        for (let k = 0; k < a[i].length; k++) {
          for (let j = i + 1; j < b.length; j++) {
            if (k === 0) {
              if (a[i][k].val === b[j][k].val) {
                a[i][k].rowspan++
                a[j][k].val = ''
              } else {
                console.log({ i, j, k })
                break
              }
            } else {
              if (a[i][k].val === b[j][k].val && a[j][k - 1].val === '') {
                a[i][k].rowspan++
                a[j][k].val = ''
              } else {
                console.log({ i, j, k })
                break
              }
            }
          }
        }
      }
    },*/
    /* // 笛卡尔积
    cartesianProductOf() {
      return Array.prototype.reduce.call(arguments, function(a, b) {
        const ret = []
        a.forEach(function(a) {
          b.forEach(function(b) {
            ret.push(a.concat([b]))
          })
        })
        return ret
      }, [[]])
    },
    addSpec() {
      this.list.push({
        name: '',
        description: '',
        goodsType: '',
        isRequired: false,
        values: []
      })
    },

    deleteSpec(index) {
      this.list.splice(index, 1)
      this.createTable()
    },*/
    changeClass() {
      if (this.form.serviceClass.length < 2) {
        this.form.serviceClass = []
        return this.$message.error('请选择商品二级分类')
      }
    },
    addTimeInterval() {
      console.log(this.timeList)
      if (this.timeList.length > 0) {
        if (this.$refs.TimeInterval[this.timeList.length - 1].getData().endTime == '22:00') {
          this.$message.warning('最晚结束时间为22:00')
          return
        } else {
          this.timeList.push(1)
          if (this.timeList.length > 1) {
            this.$nextTick(() => {
              this.$refs.TimeInterval[this.timeList.length - 1].setMinTime(this.$refs.TimeInterval[this.timeList.length - 2].getData().endTime)
              this.$refs.TimeInterval[this.timeList.length - 2].setDisabled(true)
            })
          }
        }
      } else {
        this.timeList.push(1)
      }
    },
    deleteTimeInterval(index) {
      this.timeList.splice(index, 1)
      if (this.timeList.length >= 1) {
        this.$refs.TimeInterval[this.timeList.length - 1].setDisabled(false)
      }
    },
    uploadServiceUrl(response, file) {
      file.imgUrl = response.data.relativePath
      this.form.serviceImg.push(file)
    },
    // 图片大小限制
    beforeAvatarUpload: function(file) {
      const isImg = (file.type === 'image/jpeg' || file.type === 'image/png')
      const isLt3M = file.size / 1024 / 1024 < 3

      if (!isImg) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
      }
      if (!isLt3M) {
        this.$message.error('上传头像图片大小不能超过 3MB!')
      }
      return isImg && isLt3M
    },
    onRemove(file, fileList) {
      this.hideUpload = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.form.serviceImg, item => item.uid === file.uid)
      if (index >= 0) {
        this.form.serviceImg.splice(index, 1)
      }
    },
    // 上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) === -1) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
      if (!fileSize) {
        this.$message.error('视频大小不能超过50MB')
        return false
      }
      this.isShowUploadVideo = false
    },
    // 进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true
      this.videoUploadPercent = file.percentage.toFixed(0) * 1
    },
    // 上传成功回调
    handleVideoSuccess(res, file) {
      /* console.log(process.env.VUE_APP_BASE_API)
      /!* this.$refs.image.clearValidate()*!/
      this.isShowUploadVideo = true
      this.videoFlag = false
      this.videoUploadPercent = 0
      console.log(res)
      this.form.serviceVideo = res.data.relativePath*/
      this.videoFlag = false
      this.videoUploadPercent = 1
      this.form.serviceVideo = res.data.relativePath
      // 前台上传地址
      // if (file.status == 'success' ) {
      //    this.videoForm.showVideoPath = file.url;
      // } else {
      //     layer.msg("上传失败，请重新上传");
      // }

      // 后台上传地址
      /* if (res.Code === 0) {
        this.videoForm.showVideoPath = res.Data
      } else {
        this.$message.error(res.Message)
      }*/
    },

    handleRomeve(file) {
      console.log(file)
    },
    changeServiceSku(regualr, skuFormData) {
      if (skuFormData.regualrList.length === 0) {
        this.disabled = false
      } else {
        this.disabled = true
      }
      this.form.regualr = regualr
    },
    returnPage() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },
    submitService() {
      if (!this.form.serviceName) {
        return this.$message({ type: 'error', message: '服务名称不能为空' })
      }
      /* if (!this.form.serviceIntroduce) {
        return this.$message({ type: 'error', message: '服务简介不能为空' })
      }*/
      if (!this.form.serviceImg || this.form.serviceImg.length <= 0) {
        return this.$message({ type: 'error', message: '请至少上传一张商品图片' })
      }
      if (!this.form.serviceLabel || this.form.serviceLabel <= 0) {
        return this.$message({ type: 'error', message: '服务标签不能为空' })
      }
      if (!this.form.serviceClass || this.form.serviceClass <= 0) {
        return this.$message({ type: 'error', message: '服务分类不能为空' })
      }
      if (!this.form.radio) {
        return this.$message({ type: 'error', message: '推广不能为空' })
      }
      if (!this.form.doctorDivided) {
        return this.$message.error('医生分成比例不能为空')
      }
      if (!this.form.cost && !this.form.regualr) {
        return this.$message({ type: 'error', message: '服务成本价不能为空' })
      }
      if (!this.form.originalPrice && !this.form.regualr) {
        return this.$message({ type: 'error', message: '服务原价不能为空' })
      }
      if (!this.form.department || this.form.department <= 0) {
        return this.$message({ type: 'error', message: '服务科室不能为空' })
      }
      if (!this.form.appointmentDay) {
        return this.$message({ type: 'error', message: '服务预约天数不能为空' })
      }
      if (!this.$refs.TimeInterval) {
        return this.$message({ type: 'error', message: '时间段不能为空' })
      }
      if (!this.form.annouce) {
        return this.$message({ type: 'error', message: '服务须知不能为空' })
      }
      if (!this.form.serviceProcess) {
        return this.$message({ type: 'error', message: '服务流程不能为空' })
      }
      const timeIntervalList = []
      this.$refs.TimeInterval.forEach(item => {
        const timeString = {
          startTime: item.getData().startTime,
          endTime: item.getData().endTime
        }
        timeIntervalList.push(timeString)
      })

      if (this.$refs.TimeInterval && timeIntervalList && timeIntervalList.length === 0) {
        return this.$message({ type: 'error', message: '时间段不能为空' })
      }

      if (!this.$refs.serviceSku.validate()) {
        return
      }

      let tagList = ''
      console.log(this.form.serviceLabel)
      this.form.serviceLabel.forEach(item => {
        if (!tagList) {
          tagList = tagList + item
        } else {
          tagList = tagList + ',' + item
        }
      })
      if (this.isCopyService) {
        this.form.regualr.forEach(info => {
          if (info.productId) {
            info.productId = null
          }
        })
      }
      const data = {
        shopId: localStorage.getItem('shopId'),
        serviceName: this.form.serviceName,
        serviceJj: this.form.serviceIntroduce,
        serviceImg: this.form.serviceImg.map(item => {
          return item.imgUrl
        }),
        department: this.form.department[0],
        serviceVideo: this.form.serviceVideo,
        serviceType: this.form.serviceClass.slice(-1)[0],
        serviceLabel: tagList,
        joinAdv: { joinState: this.form.radio, joinValue: this.form.radio1, joinPercent: this.form.percent, joinFix: this.form.fix },
        /* radio: this.form.radio,
        percent: this.form.radio1 === '0' ? this.form.percent : null,
        fix: this.form.radio1 === '1' ? this.form.fix : null,*/
        doctorDivided: this.form.doctorDivided,
        cost: this.form.cost,
        originalPrice: this.form.originalPrice,
        shareDescript: this.form.shareDescript,
        appointTime: this.form.appointmentDay,
        timeList: timeIntervalList,
        serviceSpec: this.form.regualr,
        serviceNotice: this.form.annouce,
        serviceProcess: this.form.serviceProcess,
        serviceId: this.id
      }

      if (this.isEditGoods) {
        data['serviceId'] = this.serviceId
      }

      console.log(data)

      const loadingInstance = Loading.service({ fullscreen: true })

      addOnlineService(data).then(response => {
        console.log(response.data)
        loadingInstance.close()
        if (this.isEditService) {
          this.$message.success('编辑服务成功')
        } else {
          this.$message.success('新增服务成功')
        }
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      }).catch(res => {
        loadingInstance.close()
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
      /* this.$nextTick(() => {
        console.log(this.$refs.UploadImg)
        const uploadImgList = this.$refs.UploadImg
        console.log(this.$refs.ServiceCostValue)
        const costList = this.$refs.ServiceCostValue
        console.log(this.$refs.ServiceOriginalValue)
        const originList = this.$refs.ServiceOriginalValue
        console.log(this.tableModelList)
        this.tableModelList.forEach((item, i, arr) => {
          const tItem = {}
          const regulars = []
          item.forEach((info, j, array) => {
            if (info.val === 'cost') {
              tItem['cost'] = costList[i].getData()
            } else if (info.val === 'original') {
              tItem['orginalPrice'] = originList[i].getData()
            } else if (info.val === 'img') {
              tItem['picture'] = uploadImgList[i].getData()
            } else {
              regulars.push({ name: this.theadList[j], value: this.tableModelList[i][j].val })
            }
          })
          tItem['regualrs'] = regulars
          this.tablePost.push(tItem)
        })
        console.log(this.tablePost)
        const descriptionList = []
        this.$refs.SpecItem.forEach(item => {
          descriptionList.push(item.getData().description)
        })
        let tagList = ''
        this.form.serviceLabel.forEach(item => {
          if (!tagList) {
            tagList = tagList + item
          } else {
            tagList = tagList + ',' + item
          }
        })
        const data = {
          shopId: localStorage.getItem('shopId'),
          serviceName: this.form.serviceName,
          serviceJj: this.form.serviceIntroduce,
          serviceImg: this.form.serviceImg,
          serviceVideo: this.form.serviceVideo,
          serviceLabel: tagList,
          serviceType: this.form.serviceClass.slice(-1)[0],

          joinAdv: { joinState: this.form.radio1, joinValue: this.form.radio2, joinPercent: this.form.percent, joinFix: this.form.fix },
          cost: this.form.cost,
          originalPrice: this.form.originalPrice,
          shareDescript: this.form.shareDescript,
          department: this.form.department[0],
          appointTime: this.form.appointmentDay,
          timeList: timeIntervalList,
          serviceSpec: this.tablePost,
          serviceNotice: this.annouce,
          serviceProcess: this.serviceProcess
        }
        console.log(data)

        addOnlineService(data).then(response => {
          console.log(response.data)
          this.$router.go(-1)
        })
      })*/
    }
    /* submitService() {
      if (!this.form.commodityName) {
        return this.$message({ type: 'error', message: '商品名称不能为空' })
      }
      if (!this.form.commodityImage || this.form.commodityImage.length <= 0) {
        return this.$message({ type: 'error', message: '请至少上传一张商品图片' })
      }
      if (!this.form.commodityClass || this.form.commodityClass.length <= 0) {
        return this.$message({ type: 'error', message: '商品分类不能为空' })
      }
      if (!this.form.commodityLabel || this.form.commodityLabel.length <= 0) {
        return this.$message({ type: 'error', message: '商品标签不能为空' })
      }

      if (!this.form.priceAfter) {
        return this.$message({ type: 'error', message: '价格后缀不能为空' })
      }
      if (!this.$refs.goodsSku.validate()) {
        return
      }

      if (!this.$refs.extendsSku.validate()) {
        return
      }

      if (!this.form.commodityDetail || this.form.commodityDetail.length <= 0) {
        return this.$message({ type: 'error', message: '商品详情不能为空' })
      }

      const extral = this.$refs.extendsSku.getData()

      const data = {
        commodityName: this.form.commodityName,
        commodityBrief: this.form.commodityHighlights,
        commodityNameTag: this.form.commodityNameTag,
        commodityImage: this.form.commodityImage.map(item => {
          return item.imgUrl
        }),
        commodityVideo: this.form.commodityVideo,
        commodityClass: this.form.commodityClass.slice(-1)[0],
        commodityLabel: this.form.commodityLabel,
        commodityType: this.form.commodityType,
        radio: this.form.radio,
        percent: this.form.radio1 === '0' ? this.form.percent : null,
        fix: this.form.radio1 === '1' ? this.form.fix : null,
        cost: this.form.cost,
        orginalPrice: this.form.originalPrice,
        deposit: this.form.prepaymentPrice,
        share: this.form.share,
        weight: this.form.weight,
        commodityDetail: this.form.commodityDetail,
        regualr: this.form.regualr,
        extral: extral,
        unit: this.form.priceAfter
      }

      if (this.isEditGoods) {
        data['commodityId'] = this.goodsId
      }

      console.log(data)

      const loadingInstance = Loading.service({ fullscreen: true })

      addCommodity(data).then(response => {
        console.log(response.data)
        loadingInstance.close()
        if (this.isEditGoods) {
          this.$message.success('编辑商品成功')
        } else {
          this.$message.success('新增商品成功')
        }
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      }).catch(res => {
        loadingInstance.close()
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    }*/
  }
}
</script>

<style lang="scss" scoped>
.AddService {
  min-width: 1700px;
  padding: 0px 100px;
  .ele-title {
    margin-top: 40px;
    padding-left: 20px;
  }
  .ele-con-res {
    background: #f3f3f3;
    height: 50px;
    border-radius: 5px;
    line-height: 50px;
    margin-top: 40px;
    span {
      font-size: 16px;
      font-weight: bold;
      padding-left: 20px;
    }
  }
  .ele-content {
    padding: 0px 25px;
    ::v-deep.el-form-item--medium {
      margin-top: 20px;
    }
    ::v-deep.el-form-item__label {
      width: 100px;
      text-align: start;
    }
    /*.ele-proportion,
    .ele-pre {
      margin-left: 100px;
    }*/
    .ele-pre {
      line-height: 30px;
      font-size: 14px;
      color: gray;
      width: 520px;
    }
    .title-txt {
      font-size: 14px;
      color: gray;
      white-space: nowrap;
      margin: 0;
      padding: 0;
    }
    .ele-cascader {
      width: 100%;
    }
    .ele-proportion {
      ::v-deep.el-input {
        width: 150px;
      }
    }
    .Specifications {
      padding: 40px 20px;
      padding-top: 25px;
      width: 100%;
      border: 1px solid #e6e6e6;
      .cations-tag {
        ::v-deep.el-row {
          margin-top: 15px;
        }
        .ele-col-item {
          width: 60px;
        }
      }
      ::v-deep.el-button {
        width: 150px;
      }
    }
    .ele-table {
      min-width: 100%;
      border-collapse: collapse;
      margin-top: 30px;
      tr td {
        width: 80px;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
        text-align: center;
      }
      thead {
        font-weight: bold;
        tr td {
          height: 60px;
        }
      }
      tbody {
        tr {
          td {
            ::v-deep.el-image {
              width: 50px;
              height: 50px;
              object-fit: cover;
              border: 1px solid #e6e6e6;
              overflow: unset;
              margin: 10px 0px;
            }
            ::v-deep.el-input {
              width: 120px;
            }
            .custom {
              display: flex;
              align-items: center;
              justify-content: center;
              span {
                margin-left: 5px;
              }
            }
          }
        }
      }
    }
    .ele-commdity-detail {
      ::v-deep.el-form-item__label {
        width: 100% !important;
        background: #f3f3f3;
        height: 50px;
        line-height: 50px !important;
      }
    }
    .a-details-right {
      width: 100%;
      display: flex;
      justify-content: center;
      img {
        display: inline-block;
        width: 200px;
        height: 200px;
      }
    }
    .cus-input {
      width: 100%;
      max-width: 400px;
      ::v-deep .el-input__inner{
        padding-right: 42px;
      }
    }
    ::v-deep .hide .el-upload--picture-card {
      display: none !important;

    }

  }
}
.flex {
  display: flex;
}
.marginleft {
  margin-left: 12px;
}
.text {
  text-align: end;
  padding-right: 10px;
}

</style>
